<template>
	<div class="switcher">
		<button
			class="theme-toggle"
			@click="toggleTheme()"
			:aria-label="$t('theme.toggle')"
			:disabled="isChanging"
		>
			<span class="theme-icon">{{ themeIcon }}</span>
			<span class="theme-text">{{ themeText }}</span>
		</button>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { lStorage } from '@/utils/storage'

const { t } = useI18n()

const currentTheme = ref('dark')
const isChanging = ref(false)
const forceUpdate = ref(0) // 用于强制更新computed

const themeIcon = computed(() => {
	// 添加forceUpdate依赖，确保重新计算
	forceUpdate.value
	// 显示下一个可切换的主题图标
	return currentTheme.value === 'dark' ? '☀️' : '🌙'
})

const themeText = computed(() => {
	// 添加forceUpdate依赖，确保重新计算
	forceUpdate.value
	// 显示下一个可切换的主题文本
	return currentTheme.value === 'dark'
		? t('theme.light', 'Light')
		: t('theme.dark', 'Dark')
})

// 监听主题变化，强制更新computed
watch(
	currentTheme,
	() => {
		nextTick(() => {
			forceUpdate.value++
		})
	},
	{ immediate: true }
)

function toggleTheme() {
	if (isChanging.value) return

	isChanging.value = true

	const body = document.body
	const newTheme = currentTheme.value === 'dark' ? 'light' : 'dark'

	// 立即更新当前主题，这样显示文字会立即改变
	currentTheme.value = newTheme

	// 更新DOM和存储
	body.className = newTheme
	lStorage.set('theme', newTheme)

	// 减少切换延迟
	setTimeout(() => {
		isChanging.value = false
	}, 150)
}

onMounted(() => {
	// 从本地存储恢复主题设置
	const savedTheme = lStorage.get('theme')

	if (savedTheme && ['dark', 'light'].includes(savedTheme)) {
		currentTheme.value = savedTheme
		document.body.className = savedTheme
	} else {
		// 默认主题或根据系统偏好设置
		const prefersDark = window.matchMedia(
			'(prefers-color-scheme: dark)'
		).matches
		const defaultTheme = prefersDark ? 'dark' : 'light'
		currentTheme.value = defaultTheme
		document.body.className = defaultTheme
		lStorage.set('theme', defaultTheme)
	}
})
</script>

<style scoped>
.switcher {
	display: inline-block;
}

.theme-toggle {
	background: none;
	border: 1px solid;
	border-radius: 25px;
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 100px;
	justify-content: center;
	position: relative;

	/* 深色主题样式 */
	border-color: var(--theme-header-border);
	color: var(--theme-header-text-muted);

	&:hover {
		border-color: var(--theme-accent);
		color: var(--theme-accent);
		background: var(--theme-header-hover);
		transform: translateY(-1px);
	}

	&:active {
		transform: translateY(0) scale(0.98);
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 2px var(--theme-accent);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		transform: none;
	}
}

.theme-icon {
	font-size: 16px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.theme-text {
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.3s ease;
}

/* 切换动画效果 */
.theme-toggle:active .theme-text {
	transform: scale(0.95);
}

.theme-toggle:hover .theme-icon {
	transform: scale(1.1);
}

/* 主题切换时的动画效果 */
:global(.theme-changing) {
	.theme-toggle {
		.theme-icon {
			animation: iconFlip 0.3s ease-in-out;
		}

		.theme-text {
			animation: textSlide 0.3s ease-in-out;
		}
	}
}

@keyframes iconFlip {
	0% {
		transform: scale(1) rotateY(0deg);
	}
	50% {
		transform: scale(1.2) rotateY(180deg);
	}
	100% {
		transform: scale(1) rotateY(360deg);
	}
}

@keyframes textSlide {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	50% {
		transform: translateX(10px);
		opacity: 0.5;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* 响应式设计 */
@media (max-width: 768px) {
	.theme-toggle {
		padding: 6px 12px;
		font-size: 13px;
		min-width: 90px;
		gap: 6px;
	}

	.theme-icon {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.theme-toggle {
		padding: 6px 10px;
		font-size: 12px;
		min-width: 80px;
		gap: 4px;
	}

	.theme-icon {
		font-size: 12px;
	}
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
	.theme-toggle,
	.theme-text,
	.theme-icon {
		transition: none;
	}

	.theme-toggle:hover {
		transform: none;
	}

	.theme-toggle:active {
		transform: none;
	}

	.theme-toggle .theme-icon {
		animation: none;
	}

	.theme-toggle .theme-text {
		animation: none;
	}
}
</style>
